<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>王者荣耀周边商城</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="wrap">
  <!-- 头部 -->
  <div class="top">
    <div class="top-main">
      <img class="logo1" src="../image/logo-1.gif" alt="">
      <img class="logo2" src="../image/logo-2.gif" alt="">
      <input type="text" placeholder="请输入想要的宝贝">
      <div class="denglu">
        <img src="../image/denglu.gif" alt="">
        <a href="../pages/denglu.html">立即登录</a>
      </div>
      <div class="gouwuche">  
        <img src="../image/gouwuche.gif" alt="">
        <a href="">购物车</a>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div class="wrap-nav">
    <div class="nav">
      <ul class="nav-l">
        <li>首页</li>
        <li>精品热销</li>
        <li>精品手办</li>
        <li>数码3C</li>
        <li>服装服饰</li>
        <li>毛绒抱枕</li>
      </ul>
      <div class="nav-r">
        <div class="nav-r-b" >
          <p>全部商品分类</p>

          <!-- 定位覆盖 -->
          <div class="nav-b">
            <div class="nav-b-c">
              <ul class="nav-1">
                <li><img src="../image/4.png"> </li>
                <li class="nav-2">手办模玩</li>
                <li class="nav-3">写实手办</li>
                <li  class="nav-3">迷你盒蛋</li>
                <li  class="nav-3">可动手办</li>
                <li  class="nav-3">Q萌手办</li>
                <li  class="nav-3">模型玩具</li>
              </ul>
              <ul class="nav-1">
                <li><img src="../image/3.png"></li>
                <li class="nav-2">数码3C</li>
                <li  class="nav-3">手机壳</li>
                <li  class="nav-3">移动电源</li>
                <li  class="nav-3">电宝</li>
                <li class="nav-3">数据线</li>
                <li class="nav-3">鼠标垫</li>
                <li class="nav-3">手机支架</li>
                <li class="nav-3">Airpods</li>
                <li class="nav-3">保护套</li>
                <li class="nav-3">精品线</li>
              </ul>
              <ul class="nav-1">
                <li><img src="../image/2.png"></li>
                <li class="nav-2">服饰</li>
                <li  class="nav-3">T谐</li>
                <li  class="nav-3">帽子</li>
                <li  class="nav-3">卫衣</li>
                <li class="nav-3">华服</li>
                <li class="nav-3">鞋靴</li>
                <li class="nav-3">袜子</li>
              </ul>
              <ul class="nav-1">
                <li><img src="../image/1.png"></li>
                <li class="nav-2">毛绒玩偶</li>
                <li  class="nav-3">毛绒公仔</li>
                <li  class="nav-3">毛绒挂件</li>
                <li  class="nav-3">毛绒抱枕</li>
              </ul>
              <ul class="nav-1">
                <li><img src="../image/5.png"></li>
                <li class="nav-2">生活用品</li>
                <li  class="nav-3">马克杯</li>
                <li  class="nav-3">挂绳</li>
                <li  class="nav-3">徽章</li>
                <li class="nav-3">其他</li>
                <li class="nav-3">按摩捶</li>
                <li class="nav-3">日常配饰</li>
                <li class="nav-3">文具</li>
                <li class="nav-3">箱包</li>
                <li class="nav-3">小夜灯</li>
                <li class="nav-3">扇子</li>
                <li class="nav-3">便利贴</li>
                <li class="nav-3">贴纸</li>
              </ul>
              <ul class="nav-1">
                <li><img src="../image/6.png"></li>
                <li class="nav-2">智能机器人</li>
                <li  class="nav-3">智能机器人</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="lunbo">
    <div class="main">
      <img class="show" src="../image/lun1.jpg" alt="">
      <img src="../image/lun2.jpg" alt="">
      <img src="../image/lun3.jpg" alt="">
      <img src="../image/lun4.jpg" alt="">
      <img src="../image/lun5.jpg" alt="">
    </div>
    <ul class="num">
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </div>
  <!-- 商品内容 -->
  <div class="content">
    <div class="content1">
      <!-- 精美手办 -->
      <div class="content1-top">
        <div class="content1-top-main">
          <h1>精美手办</h1>
          <h3>正品手办,&nbsp;品质重现</h3>
          <div class="content1-top-r">
            <h4>更多</h4>
            <span>+</span>
          </div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="content1-main">
        <a href="../pages/list.html"><img src="../image/tu1.jpg" alt=""></a>
      </div>
      <div class="good-list">
        <ul>
          <li><a href="">
            <img src="../image/pian1.jpg" alt="">
            <p class="p1">传说之刃花木兰Q版手办</p>
            <p class="p2">￥168</p>
          </a></li>
          <li><a href="">
            <img src="../image/pian2.jpg" alt="">
            <p class="p1">Myethos 游园惊梦甄姬手办</p>
            <p class="p2">￥798</p>
          </a></li>
          <li><a href="">
            <img src="../image/pian3.jpg" alt="">
            <p class="p1">信念之刃阿轲Q版手办</p>
            <p class="p2">￥188</p>
          </a></li>
          <li class="good"><a href="">
            <img src="../image/pian4.jpg" alt="">
            <p class="p1">GSC野区小霸王迷你手办套装</p>
            <p class="p2">￥168</p>
          </a></li>
        </ul>
      </div>
    </div>


    <div class="content1">
      <!-- 数码3C -->
      <div class="content1-top">
        <div class="content1-top-main">
          <h1>数码3C</h1>
          <h3>王者3C,&nbsp;玩游戏，更刺激！</h3>
          <div class="content1-top-r">
            <h4>更多</h4>
            <span>+</span>
          </div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="content1-main">
        <a href=""><img src="../image/tu2.jpg" alt=""></a>
      </div>
      <div class="good-list">
        <ul>
          <li><a href="">
            <img src="../image/pian5.jpg" alt="">
            <p class="p1">永恒钻石上分腕带手机壳</p>
            <p class="p2">￥68</p>
          </a></li>
          <li><a href="">
            <img src="../image/pian6.jpg" alt="">
            <p class="p1">黑白系列双层手机壳（多款式可选）</p>
            <p class="p2">￥69</p>
          </a></li>
          <li><a href="">
            <img src="../image/pian7.jpg" alt="">
            <p class="p1">Q萌英雄双层手机壳（多款式可选）</p>
            <p class="p2">￥68</p>
          </a></li>
          <li class="good"><a href="">
            <img src="../image/pian8.jpg" alt="">
            <p class="p1">绝代智谋诸葛亮蓝光手机壳</p>
            <p class="p2">￥59</p>
          </a></li>
        </ul>
      </div>
    </div>

    <div class="content1">
      <!-- 生活周边 -->
      <div class="content1-top">
        <div class="content1-top-main">
          <h1>生活周边</h1>
          <h3>游戏时做你的贴身陪伴</h3>
          <div class="content1-top-r">
            <h4>更多</h4>
            <span>+</span>
          </div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="content1-main">
        <a href=""><img src="../image/tu3.jpg" alt=""></a>
      </div>
      <div class="good-list">
        <ul>
          <li><a href="">
            <img src="../image/pian9.jpg" alt="">
            <p class="p1">天美官方荣耀典藏</p>
            <p class="p2">￥158</p>
          </a></li>
          <li><a href="">
            <img src="../image/pian10.jpg" alt="">
            <p class="p1">鲲系列抱枕</p>
            <p class="p2">￥58</p>
          </a></li>
          <li><a href="">
            <img src="../image/pian11.jpg" alt="">
            <p class="p1">吃饱饱系列毛绒公仔</p>
            <p class="p2">￥128</p>
          </a></li>
          <li class="good"><a href="">
            <img src="../image/pian12.jpg" alt="">
            <p class="p1">我拿蓝BUFF毛绒公仔</p>
            <p class="p2">￥68</p>
          </a></li>
        </ul>
      </div>
    </div>

    <div class="content1">
      <!-- 服装服饰 -->
      <div class="content1-top">
        <div class="content1-top-main">
          <h1>服装服饰</h1>
          <h3>王者服饰,&nbsp;穿上更自信</h3>
          <div class="content1-top-r">
            <h4>更多</h4>
            <span>+</span>
          </div>
        </div>
      </div>
      <!-- 图片 -->
      <div class="content1-main">
        <a href=""><img src="../image/tu4.jpg" alt=""></a>
      </div>
      <div class="good-list">
        <ul>
          <li><a href="">
            <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202006/20200608141216_17934.jpg" alt="">
            <p class="p1">云端筑梦师庄周印花T恤</p>
            <p class="p2">￥138</p>
          </a></li>
          <li><a href="">
            <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202006/20200606220826_51296.jpg" alt="">
            <p class="p1">缤纷独角兽小乔印花T恤</p>
            <p class="p2">￥138</p>
          </a></li>
          <li><a href="">
            <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/201910/20191017151456_56203.jpg" alt="">
            <p class="p1">王者荣耀周年庆纪念款卫衣</p>
            <p class="p2">￥188</p>
          </a></li>
          <li class="good"><a href="">
            <img src="https://game.gtimg.cn/images/zb/x5/uploadImg/goods/202004/20200417173204_39961.jpg" alt="">
            <p class="p1">王者态度系列T恤</p>
            <p class="p2">￥138</p>
          </a></li>
        </ul>
      </div>
    </div>
    
  </div>
  <!-- 底部 -->
  <div class="footer">
    <div class="footer-main">
      <div class="foot-l">
        <img src="../image/daoju.jpg" alt="">
        <span></span>
      </div>
      <div class="foot-c">
        <ul>
          <li>
            <img src="../image/tupin1.gif" alt="">
            <span>购物指南</span>
          </li>
          <li>
            <img src="../image/tupian2.gif" alt="">
            <span>配送方式</span>
          </li>
          <li>
            <img src="../image/tupian3.gif" alt="">
            <span>常见操作</span>
          </li>
          <li>
            <img src="../image/tupian4.gif" alt="">
            <span>售后服务</span>
          </li>
          <li>
            <img src="../image/tupian5.gif" alt="">
            <span>关于我们</span>
          </li>
        </ul>
        <span class="tiao"></span>
      </div>
      <div class="foot-r">
        <ul>
          <li>
            <img src="../image/7.jpg" alt="">
            <p>聚诚品公众号</p>
          </li>
          <li>
            <img src="../image/8.jpg" alt="">
            <p>道具城公众号</p>
          </li>
          <li>
            <img src="../image/9.png" alt="">
            <p>掌上道具城</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 版权 -->
  <div class="ber">
    <div class="ber1">
      <ul>  
        <li >腾讯互动娱乐</li>
        <li >服务条款</li>
        <li >腾讯游戏隐私保护指引</li>
        <li >腾讯游戏隐私保护指引</li>
        <li >广告服务</li>
        <li >腾讯游戏招聘</li>
        <li >腾讯游戏客服</li>
        <li >游戏地图</li>
        <li >成长守护平台</li>
        <li >商务合作</li>
        <li >网站导航</li>
      </ul>
      <ul class="ul1">
        <li>粤网文[2014]0633-233号</li>
        <li>增值电信业务经营许可证:</li>
        <li>粤B2-20090059 B2-20090028</li>
        <li>违法和不良信息举报电话:</li>
        <li>0755-83767606</li>
      </ul>
      <p>COPYRIGHT © 1998 – 2020 TENCENT. ALL RIGHTS RESERVED.</p>
      <p class="banquan">帅虎公司 版权所有</p>
    </div>
  </div>
  <!-- 法律 -->

  <div class="foot">
    <div>
      <img src="../image/gswj.png" alt=""><a href="">工商网监电子标识</a>
    </div>
  </div>
  <div class="guding">
    <ul>
      <li class="guding1"><div ><img src="../image/10.gif" alt=""></div><span>我的订单</span></li>
      <li class="guding1"><div><img src="../image/11.gif" alt=""></div><span>我的地址</span></li>
      <li class="guding2"><img src="../image/12.gif" alt=""><span>购物车</span><h3>0</h3></li>
      <li class="guding1"><div><img src="../image/13.gif" alt=""></div><span>咨询</span></li>
    </ul>
  </div>
  
</div>
<script src="../script/utils.js"></script>
<script src="../script/index.js"></script>
</body>
</html>